<template>
    <div class="redeem_wrap" >
		<img src="../assets/redeem_bg.png" alt="" class="redeem-bg">
		<img src="../assets/redeem_top.png" alt="" class="redeem-top">
		<img src="../assets/redeem_title.png" alt="" class="redeem-title">
		<img src="../assets/redeem_content.png" alt="" class="redeem-content">
		<img src="../assets/redeem_footer.png" alt="" class="redeem-footer" 
		:style="{marginTop: xFooterMargin}">
			
		<div class="input-wrap">
			<input type="text" class="redeem-input" maxlength="9" 
			v-model="code" placeholder="请输入你的专属兑换码"
			@blur="blurInput" @focus="handleFocus"
			>
		</div>
		<div class="btn-wrap">
			<img src="../assets/redeem_get.png" alt="" class="redeem-btn" @click="handleClick">
		</div>
		<img src="../assets/redeem_note.png" alt="" class="redeem-note">
    </div>
</template>

<script>
import transformTime from '@/filters/transformTime'
import yryz from '@/js/yryz'
export default {
    data() {
        return {
			userId: '',
			code: '',
        }
	},
	methods: {
		handleClick() {
			if (this.code.length === 0) {
				this.$toast('请输入兑换码');
				return;
			}
			if (this.validateCode()) {
				this.$toast('领取成功');
				setTimeout(() => {
					// this.$router.push('/official-activity/course');	
					// 分享到微信跳转该页面，签名无效（页面重新加载，重新认证）
					location.href = '/official-activity/course';				
				}, 2000);
				return;
			}
			this.$toast('兑换码错误');
		},
		validateCode() {
			if (this.code.length === 9 && /^SLQG/i.test(this.code)) {
				return true;
			}
			return false;
		},
		blurInput() {
			// 有的iphone手机收起键盘时页面未恢复
			window.scroll(0, 0);
		},
		handleFocus() {
			// 有的安卓手机在分享后的页面未弹起键盘
			if (this.$utils.isAndroid()) {
				window.scroll(0, 320);
			}
		}
	},
    computed: {
		xFooterMargin() {
			return this.$utils.isIphoneX() ? '33%' : '19%';
		}
	},
	created() {
		if (this.$utils.isWeiXin()) {
			this.$utils.wxShare({
				title: '7天变身魅力女神',
				desc: '独一无二的情感秘籍，自我管理、魅力提升、两性关系、狙击真爱，限时免费送！！！',
				link: `${window.location.origin}/official-activity/redeem`,
				imgUrl: 'https://cdn.yryz.com/lovelorn/image/default/201905/358360856731648.png?w=690&h=370', 
			})
		}
	}
}
</script>

<style type="text/css" scoped>
  @import "../../../css/var.css";

  .redeem_wrap {
	  font-size: 0;
		& .redeem-bg {
			position: absolute;
			width: 100%;
			height: 100%;
		}
		& .redeem-top{
			width: 7.5rem;
			height: 7.45rem;
			position: absolute;
			top: 0;
		}
		& .redeem-title {
			width: 7.5rem;
			height: 2.75rem;
			position: absolute;
			top: 2%;
		}
		& .redeem-content {
			width: 5.2rem;
			height: 3.85rem;
			position: relative;
			margin-top: 50%;
			/* top: 28%; */
			left: 1.15rem;
		}
		& .redeem-footer {
			width: 7.5rem;
			height: 4.15rem;
			position: relative;
			margin-top: 19%;
		}
		& .redeem-note {
			width: 7.5rem;
			height: 2rem;
			position: relative;
			margin-top: -1%;
		}
		& .input-wrap{
			text-align: center;
			left: 50%;
			transform: translateX(-50%);
			position: relative;
			margin-top: -66%;

			& input::-webkit-input-placeholder{
				color: #ffaaca
			}
			& input::-moz-placeholder{
				color: #ffaaca
			}
			& input:-moz-placeholder{
				color: #ffaaca
			}
			& input:-ms-input-placeholder {
				color: #ffaaca
			}
		}
		& .redeem-input {
			font-size: .34rem;
			line-height: .5rem;
			font-weight: 600;
			color: #65d1fe;
			border: #f54b8b 0.03rem solid;
			border-radius: 0.1rem;
			width: 4.3rem;
			height: 0.8rem;
			background: #fff;
			padding: 0 0.3rem ;
		}
		& .btn-wrap{
			position: relative;
			margin-top: 6%;
			text-align: center;
		}
		& .redeem-btn{
			width: 2.23rem;
			height: 0.6rem;
		}
		
   
  }

</style>
